<template>
	<view>
			<view class="box-one" v-for="(item, index) in list" :key="index" 
					:class="[item.isFinish == 0?'skyblue':item.isFinish == 1?'yellow':item.isFinish == 2?'backcolor':'backcolorUser']">
				<navigator :url="'./HistoryDetails?id='+item.id" >
				<view class="box-two">
					<view class="time" :class="[item.isFinish==0?'colorBlue':item.isFinish==1?'colorYellow':item.isFinish == 2?'fontcolor':'fontcolorUser']">
						{{item.chooseTime}}
					</view>
					<view class="a" :class="[item.isFinish==0?'colorBlue':'colorYellow']">预约时间</view>
				</view>
				<view class="box-three">
					<view class="zuowei" :class="[item.isFinish==0?'colorBlue':item.isFinish==1?'colorYellow':item.isFinish == 2?'fontcolor':'fontcolorUser']">
						{{item.chooseNo}}
					</view>
					<view class="b" :class="[item.isFinish==0?'colorBlue':'colorYellow']">预约座位</view>
				</view>
				
					<!-- 印章效果 -->
					<view class="seal" style="position: absolute;right: 10rpx;top: 14rpx;">
						<view class="seal-son" >
							<span v-if="item.isFinish==2" :class="['Sealtwo']">
								已完成
							</span>
							<span v-else-if="item.isFinish==1" :class="['Sealone']">
								已预约
							</span>
							<span v-else-if="item.isFinish==3" :class="['Sealthree']">
								违约
							</span>
							<span v-else-if="item.isFinish==4" :class="['Sealfour']">
								使用中
							</span>
						</view>
					</view>
					</navigator>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					/* {
						chooseTime:"02-25 14:20",		//预约时间
						chooseNo:"2F-11",					//选座位置
						isFinish:0  				// 0即预约未过期
					},
					{
						chooseTime:"03-25 14:20",		//预约时间
						chooseNo:"2F-22",					//选座位置
						isFinish:1  				//1为已过期
					},
					{
						chooseTime:"06-30 14:20",		//预约时间
						chooseNo:"11",					//选座位置
						isFinish:2  				//2违约
					},
					{
						
							chooseTime:"06-30 14:20",		//预约时间
							chooseNo:"11",					//选座位置
							isFinish:3  				//3使用中
						
					} */
				]
			}
		},
		onLoad() {
				this.AppointHistoryInit();
			},
			methods: {
				AppointHistoryInit() {
					uni.$u.http
						.post('/app/appoint/getListAppoint')
						.then(res => {
							console.log(res.data);
							res.data.forEach(item => {
								// console.log("item",item);
								let newList = {
									chooseTime: item.time,
									chooseNo: item.seatName +'号',
									isFinish: item.status,
									id: item.appointId
								};
								this.list.push(newList);
							});
						})
						.catch(err => {});
				}
			}
	}
</script>

<style>
	/* 预约 */
	.skyblue{
		background-color:#74c3ff;
	}
	.colorBlue{
		color:#007AFF;
	}
	.Sealone{
		color:#f9f90e;
		background-color: #00AAFF;
	}
	/* 已完成 */
	.yellow{	
		background-color: #b6b6b6;
	}
	.colorYellow{
		color:  #888;
	}
	.Sealtwo{
		color: #eee;
		background-color: #8F8F94;
	}
	/* 违约 */
	.fontcolor{
		/* color: #d5d5d6e6; */
		color: #a59638;
	}
	.backcolor{
		/* background-color: #000000;*/
		background-color: #000000d6;
	}
	.Sealthree{
		/* background-color: #ff0000; */
		background-color: #ff0000ab;
		color: #eee;
	}
	/* 使用中 */
	.Sealfour{
		background-color: #d6df23b5;
		color: #eee;
	}
	.backcolorUser{
		background-color: #22a55bf2;
	}
	.fontcolorUser{
		color: #f8f8f8;
	}
	
	.box-one{
			position: relative;
			width: 94%;
			border-radius: 35rpx;
			margin-left: 3%;
			margin-top: 20rpx;	
		} 
	.box-two{
		display: inline-block;
		width: 50%;
		height: 40%;
		margin: 5% 0 5% 7%;
	}
	
	.box-three{
		display: inline-block;
		width: 20%;
		height: 40%;
		margin: 5% 10%;
	}
	
	.time{
		font-size: 50rpx;
	}
	
	.zuowei{
		font-size: 50rpx;
		text-align: center;
	}
	
	.a {
		padding-left: 25%;
		font: 10rpx;
		color: rgba(255, 255, 255, 0.7);
	}
	
	.b{
		padding-left: 5%;
		font: 10rpx;
		color: rgba(255, 255, 255, 0.7);
	}
	
	
	span{
		 position: absolute;
		 width: 170rpx;
		 top: 9rpx;	 
		 text-align:center;
		 font-size: 25rpx;
		 transform: rotate(46deg);
		 right: -50rpx;
		 clip-path: polygon(49rpx 0,124rpx 0,100% 100%,0 100%,0 49rpx);
	}
</style>
